import html2canvas from "html2canvas";
import domtoimage from "dom-to-image";

export default class Mark {
    constructor() {
        var html = `
            <div id="dom" style="width: 100px; height: 100px; display: flex; align-items: center">
                <div style="height:100%;">
                    <img style="height:100%" src="/assets/images/poi.png" alt="" />
                </div>
                <div style="flex: 1">Ceshi</div>
            </div>
        `;
        this.html = html;
    }
    add(viewer, position) {
        document.body.insertAdjacentHTML("beforeend", this.html);
        const element = document.getElementById("dom");
        element.style.zIndex = -1;
        html2canvas(element, { backgroundColor: "transparent" }).then(canvas => {
            var icon = canvas.toDataURL();
            viewer.entities.add({
                position: position,
                billboard: {
                    image: icon,
                    sizeInMeters: true,
                },
            });
            document.body.removeChild(element);
        });
    }
}
